$(function(){
    load();
    //1.文本框输入内容，按下回车，就可以生成代办事项
    $("#title").on("keydown",function(event){
        if(event.keyCode === 13){
            if($(this).val()===""){
                alert("请输入您的操作");
            }else{
                //读取本地存储原来的数据
            var local = getDate();
            console.log(local);
            //把local数据追加给local数组
            local.push({title:$(this).val(),done:false});
            //把数组存储给本地存储
            saveDate(local);
            //todolist本地存储数据渲染到页面
            load();
            $(this).val("");
            }
            
        }
    });
    //todolist删除操作
    $("ol,ul").on("click","a",function(){
        //先获取本地存储
        var data = getDate();
        //修改数据
        var index = $(this).attr("id");//获取索引号
        data.splice(index,1);
        //保存到本地存储
        saveDate(data);
        //重新渲染页面
        load();
    })
    //正在进行和已完成选项操作
    $("ul,ol").on("click","input",function(){
        //先获取本地存储
        var data = getDate();
        //修改数据
        var index = $(this).siblings("a").attr("id");//获取索引号
        data[index].done = $(this).prop("checked"); 
        //保存到本地存储
        saveDate(data);
        //重新渲染页面
        load();
    })
    //todolist统计正在进行个数和已经完成个数

    //读取本地存储原来的数据
    function getDate(){
        var data = localStorage.getItem("todolist");
        if(data !== null){
            //本地存储的数据是字符串格式的，我们需要的是对象格式
            return JSON.parse(data);
        }else{
            return [];
        }
    }
    function getDatedolist(){
        var data = localStorage.getItem("dolist");
        if(data !== null){
            //本地存储的数据是字符串格式的，我们需要的是对象格式
            return JSON.parse(data);
        }else{
            return [];
        }
    }
    //保存本地存储数据
    function saveDate(data){
        localStorage.setItem("todolist",JSON.stringify(data));
    }
    function saveDatedolist(data){
        localStorage.setItem("dolist",JSON.stringify(data));
    }
    

    //渲染加载数据
    function load(){
        var data = getDate();
        //遍历之前先要清空ol里面的元素
        $("ol,ul").empty();
        var todolist = 0;
        var donelist = 0;
        //遍历数据$.each()
        $.each(data,function(i,n){
            if(n.done){
                $("ul").prepend("<li><input type='checkbox'checked='checked'><p>"+n.title+"</p><a herf='javascript:;'id="+i+"></a></li>");
                donelist++;
            }else{
                $("ol").prepend("<li><input type='checkbox'><p>"+n.title+"</p><a herf='javascript:;'id="+i+"></a></li>");
                todolist++;
            }
        })
        $("#todocount").text(todolist);
        $("#docount").text(donelist);
    }

    //2.点击待办事项复选框，就把当前数据添加到已完成事项里面
    //3.点击已完成事项复选框就会把当前数据添加到待办事项里面
    //4.但是页面内容刷新不会丢失localStorage
    //核心思路：不管按下回车还是点击复选框，都是把本地存储的数据加载到页面中
    //存储的数据格式：var todolist = [{title:'xxx',dono:false}]
    //注意点1：本地存储localStorage里面只能存储字符串格式，因此需要把对象转换为字符串JSON.stringify(data)

});